チャリティーカンファレンス沖縄2020 vol.1 フロントエンド編
https://gyazo.com/e01285fe91bd47627dc0af8532baee5e
なぜ問い直すのか
技術というのは問題解決のソリューション
課題からソリューションを知ることで今自分はなにを学ぶべきかが見える
課題
与える、与えられる題目
解決しなければならない問題
なぜ解決しないとなのか
進みたい方向がある
進みたい速度がある
その障害が課題
フロントエンドの課題
良いUXを届ける
UI＝ユーザーとの接点
体験を良くしていきたい
問題解決しても悪い体験になってはいけない
使いづらい
バグる
どう使うかわからない
使えるけど、気分が良くない
UXの評価軸
Useful
Desirable
Accessible
Credible
Findable
Usable
UXを高めるために発生する課題
正解がわからない
共通解はない
ユーザー層や市場で変わってくる
マルチデバイス対応
昔はPCでの利用だけの考慮だった
各デバイス、各OSへの対応
ユーザーの期待値への増加
スマホの普及でソフトウェアが身近になってきた
一般的に利用されるもの
Instagram
Tiktok
Netfilx
これらがアプリのUXに対する期待値を増加させた
正解がわからないものにどう立ち向かうか
小さく作ってリリースしてフィードバックをもとに改善
試行回数と精度
課題
試行回数はいかに増えるか
限られた人数で開発効率上げる
コード量が増えても効率を落とさないようにできるか
データドリブンな意思決定をうまくできるか
データ収集
データの可視化
上記課題を解決しうる道具になる
試行回数を回すツール
トレードオフを考えておく
メンタルモデルが違うのでリスクの事前調査が必要
意思決定のためのツール
マルチデバイス対応の課題
以下対象
Android
iOS
Web
すべてのアプリ用に書くとリソースが増える
共通化もまた調整がむずかしい
UIとビジネスロジックの共通化
ネイティブ機能はプラグイン
直接書く必要があったりする
スマホアプリ普及によってそれに相当するUX提供
以下問題も発生
JS担当範囲増加
プロダクトの複雑性増加
不具合発生をへらす
初回表示のパフォーマンス悪化
SSR/CSR/SSGの動向2020
柴田 和祈
CSR
https://gyazo.com/ade95487d674271ca1482bfd2e6f8544
メリット
JSONのみでやりとりできる
サーバー管理も不要
大量アクセスもオートスケールしてくれる
デメリット
メディア媒体には不向き
indexされない
SSR（＋CSR）
初期ロード時にサーバサイドでHTMLを生成
SPAでの欠点を補う
Next.jsやNuxt.jsで容易にできるように
デメリット
Webサーバーが必要
ホスティングだけではできない
SSG
静的ページの生成
高速、セキュア
SSG+CSR のような構成
事前ビルドした静的ファイルを生成
必要なものはAPI経由でやる
サーバーを出来る限りもたずにやる
メディアなど静的コンテンツが多いサイトに向いている
https://gyazo.com/f8541d07ce2e099b79be966e3025d727
メリット
静的ファイルのホスティングのみ
個人利用レベルは無料
APIコールはビルドのみ
セキュアでハイパフォーマンス
デメリット
ページ数が多いと時間がかかる
プレビュー部分の実装が必要
ヘッドレスなので
新しい技術なので知見が足りない、ハマりポイントあり
ビルドの最適化
Jamstackはビルドが９割
ページ生成の時間を減らしていこう
nuxt generateの検証
nuxtの軽減対応
payloadでの高速化
各記事がわのasyncDataで受け取れる
APIリクエストを減らすことができる
Incremental Static Regeneration
初回はSSR
それ以降はHTMLが配信
遷移時はCSR
Previe Mode
cookieを発行
下書きなのかを判定する
サーバサイドも処理するホスティングサービス
NetlifyやS3ではできないもの
Gatsby Cloud
Conditional Page Builds
コンポーネント・UIカタログ集
Storybook開発駆動
疎結合の意識ができる
再利用性が高い
導入したプロジェクト
React.js 16.3.1
グローバルなチーム。コミュニケーションは英語
コンポーネント.stories.tsと対でつくる
props（インターフェイス）の設計をする
react-hooks-form
データの受け渡しはuseContextに統一
useReducerは使用しない
画像依存の場合は遅延で動作させる
500msくらい
アニメーションは妥協する
差分画像も指摘してくれる
どんな人におすすめか
コンポーネントをみれば分かるコミュニケーション
複数人開発時
独立性・再利用性を意識できる
フロントエンドのエコシステム
外松 俊尚
基盤がないとどうなるか
1. プロダクトの例
JSでカスタマイズが可能
様々な連携、プラグインが販売したり開発されてエコシステムが広がっている
ベースになるAPIがない場合
すべてプロダクト側で開発する
ユースケースを満たすけどロードマップと違うと開発されない
2. コードの場合
lintをチェックしたい
新しい場合、PRを投げるしかないか
自分たちでルールを自作できるので簡単
フロントエンドのエコシステムとは？
Webアプリ
ライブラリ
有志の開発者が開発して共有・利用
ベースになるもの
誰でも開発できる基盤
開発コミュニティ
4つのエコシステム
npm
レジストリ
npm install
小さなライブラリを組み合わせて開発
npmというエコシステムに乗る
フロントエンドの変化について
早いと思われてる
エコシステムの成熟している
特定のものの変更はある
なので移行しやすいように工夫する
Plugin
様々なユースケース
Traverse（Transform）
Config
フロントエンドの環境構築の多さ
Shareable Config
設定の共有
presets
簡単に設定できる
Create New Project / Automatic setup
create-react-app
npx -p @storybook/cli sb init
npm initについて
イニシャライザー
Type
型定義が必要になる
npm install -D @types/xxxxx
用意するには
本体で提供
有志で作成する
Definitely Typed
型定義ファイルを利用できる
ライブラリの型定義のエコシステム
Hidetaka Okamoto
Conclusion
既存の資産と集合知を活かす
CMSをas a Service なAPIで運用できるか
Jamstackの対極？
サーバーサイドCMS
モノリシックなサーバーで動くウェブアプリ
WP API
v4.7からの機能
ユーザは使い慣れたコンテンツ管理のまま
開発者はJamstackで開発できる
メリット
WordPressの運用実績・経験がある
フロント開発だけ刷新したい
WP自体やミドルウェアの保守更新が多い場合
CMSごと変えるのもアリ
Movable Typeのように静的出力する
最短時間での立ち上げは向かない
WP APIをデータソースにするプラグインがある
gastby-soruce-wordpress
gatsby-config.jsで設定する
ページのURLをどんどん生成できる
ビルド時にbulk getしてはめ込むスタイル
他のdata sourceとあまり変わらない
sourceプラグイン設定とGraphQLスキーマに慣れればOK
WordPressを静的化
ハマりどころ
日本語URLはほとんどSSGが非対応
WP側で変更する
パーマリンクはデフォルトに変更する
WPテーマはblank系推奨
WP上での表示は確認させない
JAMstack Deployments
WPからビルドWebhookをコールするプラグイン
管理
表示系の実装がなくなれば管理対象は減る
ミドルウェアやコアの更新は残る
フルマネージドなWordPressホスティング利用
非公開記事のプレビュー
gatsby developでローカル起動、もしくはサーバーで起動
Node.jsサーバーにプレビューサイトをデプロイ
プレビューのみはBASIC Authのリクエストを投げる
Jamstack
得意なことは得意なサービスにまかせる
データソースを複数扱うメリットを最大化に
Functional & UtilityベースのCSS フレームワーク
CSSフレームワーク・コンポーネント集
mx, pt, col, d-flex ...
Tailwind 作者
とても使いやすくフレンドリーなフレームワーク
TailwindとBootstrapとの比較
ユーティリティファーストである
UIコンポーネント＋ユーティリティ
とてもカスタマイズしやすい
むずかしい
使用難易度は高い
簡単に使えたり、高度な使い方はできる
ウェブサイトや
ファイルサイズは思い
軽い
フロントエンドより
バックエンド、ジュニアフロントエンジニア向け
ユースケース
firefox send
OISTのコロナリサーチコミュニティプロジェクトはそれを採用している
解決してくれるもの
リファクタリングしやすい
HTMLとCSSが疎結合なので
ネイティブコンポーネントを使用しない
エンドユーザーのために使いやすい
リソース
公式ドキュメント
考慮すること
ファイルサイズ
開発ビルドは大きくなっている
gzipして7kb
1639
PostCSS
PurgeCSS
norimalize.css
カスタマイズ性
bootstrapは_variablesで変更できる
tailwind.config.jsで設定できる